<template>
  <div>
    <Card dis-hover class="bgd-content">
      <div slot="title">
          <div class="filtr-inline">
              <Button type="info" @click="onClickAdd">添加</Button>
          </div>
          <div class="filtr-inline">
            <span>供应商名称：</span><i-input v-model="form.name" placeholder="请输入..." style="width: 140px"></i-input>
          </div>
          <div class="filtr-inline">
            <span>负责人：</span><i-input v-model="form.legal" placeholder="请输入..." style="width: 140px"></i-input>
          </div>
          <div class="filtr-inline">
              <Button type="primary" @click="getList">搜索</Button>
          </div>
      </div>
      <div>
        <Table :loading="loading" :columns="columns" :data="data"></Table>
      </div>
    </Card>
    <div class="page-block">
      <Page :total="total" :current="form.page" @on-change="onChangePage"></Page>
    </div>
    <Drawer title="操作" width='420' v-model="show">
        
        <Form ref="formBase" :model="formBase" :rules="ruleValidate" :label-width="80">
            <FormItem label="名称" prop="name">
                <Input v-model="formBase.name" style="width: 260px"></Input>
            </FormItem>
            <FormItem label="位置" prop="city">
              <Cascader :data="city" v-model="formBase.city" change-on-select style="width: 260px"></Cascader>
            </FormItem>
            <FormItem label="详细信息" prop="detail">
              <Input v-model="formBase.detail" style="width: 260px"></Input>
            </FormItem>
            <FormItem label="负责人" prop="legalPerson">
              <Input v-model="formBase.legalPerson" style="width: 260px"></Input>
            </FormItem>
            <FormItem label="手机" prop="mobile">
              <Input v-model="formBase.mobile" style="width: 260px"></Input>
            </FormItem>
            <FormItem label="对公账户" prop="bank">
              <Input v-model="formBase.bank" style="width: 260px"></Input>
            </FormItem>
            <FormItem label="上市" prop="isMarket">
              <Select v-model="formBase.isMarket" style="width:200px">
                <Option :value="item.id" v-for="item in market" :key="item.id">{{item.label}}</Option>
            </Select>
            </FormItem>
            <FormItem label="经营范围" prop="scope">
              <Input v-model="formBase.scope" type="textarea" :autosize="{minRows: 4,maxRows: 12}" style="width: 260px"></Input>
            </FormItem>
        </Form>

        <div class="drawer-footer">
            <Button type="primary" :loading="buttonLoad" @click="handleSubmit('formBase')">确定</Button>
        </div>
    </Drawer>
  </div>
</template>
<script>
import { _getList, _saveData, _delData } from '@/api/supplier.js'
import city from '@/api/city.js'
export default {
  name: 'supplier',
  data () {
    return {
      buttonLoad: false,
      loading: true,
      total: 0,
      show: false,
      city: city,
      form: {
        name: '',
        legal: '',
        page: 1
      },
      // 提交保存数据
      formBase: {
        id: '',
        name: '',
        mobile: '',
        bank: '',
        isMarket: '',
        scope: '',
        detail: '',
        legalPerson: '',
        city: []
      },
      market: [
          {
              id: 0,
              label: '否'
          },
          {
              id: 1,
              label: '是'
          }
      ],
      ruleValidate: {
        name: [
          { required: true, message: '供应商名称不能为空'},
        ],
        detail: [
          { required: true, message: '详细位置不能为空'},
        ],
        legalPerson: [
          { required: true, message: '法人名称不能为空'},
        ],
        mobile: [
          { required: true, message: '电话不能为空'},
        ],
      },
      columns: [
        {
            title: '供应商名称',
            key: 'name',
            tooltip: true,
            width: 150
        },
        {
            title: '法人',
            key: 'legalPerson',
            tooltip: true
        },
        {
            title: '电话',
            key: 'mobile',
            width: 110
        },
        {
            title: '对公账户',
            key: 'bank',
            width: 160,
            tooltip: true
        },
        {
            title: '上市',
            key: 'isMarket',
            width: 80,
            render: (h, params) => {
                if (params.row.isMarket){
                    return h('div', {
                        styles: {
                            color: 'blue'
                        }
                    }, '是')
                }else {
                    return h('div', {
                        styles: {
                            color: 'gray'
                        }
                    }, '否') 
                }
            }
        },
        {
            title: '经营范围',
            key: 'scope',
            width: 180,
            tooltip: true
        },
        {
            title: '操作',
            key: 'action',
            width: 130,
            render: (h, params) => {
                return h('div', [
                    h('Button', {
                        props: {
                            type: 'primary',
                            size: 'small'
                        },
                        style: {
                            marginRight: '5px'
                        },
                        on: {
                            click: () => {
                              this.$refs['formBase'].resetFields()

                              // 
                              this.formBase.id = params.row.id
                              this.formBase.name = params.row.name
                              this.formBase.mobile = params.row.mobile
                              this.formBase.bank = params.row.bank
                              this.formBase.isMarket = params.row.isMarket
                              this.formBase.legalPerson = params.row.legalPerson
                              this.formBase.scope = params.row.scope

                              this.formBase.city[0] = params.row.province
                              this.formBase.city[1] = params.row.city
                              this.formBase.city[2] = params.row.district
                              this.formBase.detail = params.row.detail
                              this.show = true
                            }
                        }
                    }, '查看'),
                    h('Button', {
                         props: {type: 'error', size: 'small'},
                    }, [
                        h('Poptip', {
                            props: {
                                confirm: true,
                                transfer: true,
                                placement: 'left-end',
                                title: '确定要删除吗！',
                                type: 'error',
                                size: 'small',
                            },
                            on: {
                                'on-ok': () => {
                                  _delData({id: params.row.id}).then( res => {
                                      const obj = res.data
                                      if (obj.status == 1){
                                          this.$Message.success(obj.msg);
                                          this.getList()
                                      }else {
                                          this.$Message.error(obj.msg);
                                      }
                                  })
                                },
                            }
                        }, '删除')
                    ])
                ]);
            }
        },
      ],
      data: [],
      items: [] // 存放员工类型
    }
  },
  methods: {
    onChangePage (page) {
      this.form.page = page
      this.getList()
    },
    // 增加按钮
    onClickAdd () {
      this.$refs['formBase'].resetFields()
      this.formBase.id = ''
      this.show = true
    },
    // 保存数据
    handleSubmit (form) {
      this.$refs[form].validate( (valid) => {
        if (valid) {

          const temp = this.formBase.city
          delete this.formBase.city

          if (temp[2] == undefined) {
            this.$Message.error('请填写位置')
            return
          }

          this.formBase.province = temp[0]
          this.formBase.city = temp[1]
          this.formBase.district = temp[2]

          const obj = {}
          Object.assign(obj, this.formBase)

          this.buttonLoad = true
          _saveData(obj).then( res => {
            const obj = res.data
            if (obj.status == 1){
              this.$Message.success(obj.msg)
            }else {
              this.$Message.error(obj.msg)
            }
            this.buttonLoad = false
            this.show = false
            this.getList()
          })
        }else {
          this.$Message.error('请填写必填项')
        }
      })
    },
    // 获取数据
    getList () {
      this.loading = true
      _getList(this.form).then( res => {
        const obj = res.data.data
        this.total = obj.total
        this.data = obj.data
        this.loading = false
      })
    }
  },
  mounted() {
    this.getList()
  },
}
</script>
